<template>
    <div>
        我是详情{{fileNo}}-----
        {{$store.state.city}}   可以拿到值

        <ul>
            <!-- 不用带this   调用简写之后 data in citiList   计算属性,不用带括号-->
            <li v-for="data in $store.state.citiList" :key="data.id">
                {{data}}
            </li>
        </ul>

    </div>
</template>
<script>
// 这个相当于是映射出vuex里面的属性
import { mapState } from 'vuex'    //这个是状态,放在computed中
// 里面的其他也可以简写
import { mapState,mapActions,mapMutations } from 'vuex'  //后面两个是方法,放在方法中

import obj from '@/utils/minins.js'

// 引入 混入 概念

// let obj = {
//     created () {
//         console.log('wode')
//     },
//     mounted(){
//         console.log('kk')
//     }
// }

export default {

// ********************************************************************
    // 可以把obj里面的方法,引入进来
    mixins: [obj],
// ********************************************************************
 

    data () {
        return {
            fileNo:''      
        }
    },

    mounted () {
        console.log("enter",this.$route.params.myid)
        this.fileNo = this.$route.params.myid

        console.log("enter",this.$route.params.myname)
        // 拿到myid之后,就可以进行一些发送请求id,然后用来获取具体某一个的详情信息



// ********************************************************************
        
        // 演示vuex  发送ajax请求

        // 分发,调用的vuex里面异步的,  (方法名,参数)  ,就会执行里面的方法
        this.$store.dispatch('getCityList', this.$store.state.city)

        // 简写
        getCityList(this.city)

//       判断是否用来走缓存
        if(this.$store.state.cityList.length === 0){this.$store.dispatch('getCityList', this.$store.state.city)}
        
        // 加载betterScroll  利用promise对象  axios是promise对象
        this.$store.dispatch('getCityList', this.$store.state.city).then(res=>{
            this.$nextTick(()=>{
                // 异步的,所以只有这样,才能知到完全上树了,才能进行初始化
                new BetterScroll('.box',{
                })
            })
        })

    },
    methods: {
        changeStoreValue(){
            // this.$store.state.city = "北京"     //可以进行修改  但是要采取下面的方式
          this.$store.commit('changeCity', '北京')    //利用mutations来修改
        },

        // 点击了城市定位之后应该要清除缓存了,vuex
        changeCity(){      //detil.vue
            this.$store.commit("clearCityList")
        },

        // 简写形式
        ...mapActions(['getCityList']),
    },

    // 演示简写 vuex
    computed: {
        // mapState(['cityList'])返回的是一个对象,然后...展开  
        // key : f(n)  key-> cityList
        cityList(){
            return this.$store.state.cityList
        },    
        // 映射成了本地的方法   
         ...mapState(['cityList','cityId','city'])
    }

    // computed: mapState(['cityList']),
    



    // let mm = {
    //     kk,
    //     ...test()
    // }
}
</script>